<template>
  <div class="container">
    <div id="targetContainer1"></div>
    <div class="line">
      <div class="title">还款金额</div>
      <div class="value">¥{{bizAccountBill.amount}}</div>
    </div>
    <div class="line">
      <div class="title">还款人</div>
      <div class="value">{{userInfo.userName}}</div>
    </div>
    <div id="datePicker1" class="line box box-ac">
      <div class="box-f1">
        <div class="title">还款日期</div>
        <div class="value">{{bizAccountBill.repayDate}}&nbsp;</div>
      </div>
      <!-- <div class="icon icon-arrow-right"></div> -->
    </div>
    <div @click="showPayMode = true" class="line box box-ac">
      <div class="box-f1">
        <div class="title">还款方式</div>
        <div class="value">{{bizAccountBill.payModeName}}&nbsp;</div>
      </div>
      <div class="icon icon-arrow-right"></div>
    </div>
    <div class="line">
      <div class="title">收款公司</div>
      <div class="value box box-ac">
        <div class="box-f1">{{userInfo.companyName}}</div>
      </div>
    </div>
    <div class="bottom box box-ac">
      <div v-if="!bizAccountBill.state || bizAccountBill.state == 20" @click="handleSubmit(0)" class="btn box box-f1 box-ac box-jc w-p100">暂存</div>
      <div v-if="bizAccountBill.state == 25" @click="abandonNewBills()" class="btn box box-f1 box-ac box-jc w-p100">废弃</div>
      <div @click="handleSubmit(1)" class="btn box box-f1 box-ac box-jc w-p100">提交</div>
    </div>
    <pay-modes v-if="showPayMode" @selectPayMode="selectPayMode" :payModes="payModes"></pay-modes>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getBillConfig, getJMByBillNum } from '@/assets/js/common'
import payModes from '../components/payModes'
import '@/assets/css/DateSelector.scss'
import '@/assets/js/DateSelector'
import { abandonNewBills } from '@/assets/js/api'
export default {
  name: 'jiekuanStep3',
  components: {
    payModes
  },
  computed: {
    ...mapState(['userNum', 'userInfo', 'bizAccountBill'])
  },
  data () {
    return {
      payModes: [],
      showPayMode: false
    }
  },
  mounted () {
    this.initPicker()
    this.getPayModes()
  },
  methods: {
    initPicker () {
      // let _this = this
      // let liHeight = Math.floor(document.documentElement.clientWidth / 7.5) * 0.8
      // this.picker = new DateSelector({
      //   input: 'datePicker1',
      //   container: 'targetContainer1',
      //   liHeight,
      //   type: 0,
      //   // 0：不需要tab切换，自定义滑动内容，建议小于三个；
      //   // 1：需要tab切换，【年月日】【时分】完全展示，固定死，可设置开始年份和结束年份
      //   param: [1, 1, 1],
      //   // 设置['year','month','day','hour','minute'],1为需要，0为不需要,需要连续的1
      //   beginTime: [2018, 1, 1],
      //   // 如空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点，数组的值对应param参数的对应值。
      //   endTime: [],
      //   // 如空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点，数组的值对应param参数的对应值。
      //   recentTime: [],
      //   // 如不需要设置当前时间，被为空数组，如需要设置的开始的时间点，数组的值对应param参数的对应值。
      //   success: (arr, arr2) => {
      //     _this.$store.commit('bizAccountBill', {
      //       repayDate: `${arr2[0]}-${arr2[1]}-${arr2[2]}`
      //     })
      //   }
      // })
    },
    getPayModes () {
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getPayModes'
        }
      }).then(res => {
        if (res.code === 200) {
          res.t.forEach(item => {
            if (item.isDefault) {
              item.checked = true
              this.$store.commit('bizAccountBill', {
                paymentType: item.payModeNumber,
                payModeName: item.payModeName
              })
            } else {
              item.checked = false
            }
          })
          this.payModes = res.t
        }
      })
    },
    selectPayMode (index) {
      this.payModes.forEach(item => {
        item.checked = false
      })
      this.payModes[index].checked = true
      this.$store.commit('bizAccountBill', {
        paymentType: this.payModes[index].payModeNumber,
        payModeName: this.payModes[index].payModeName
      })
      this.showPayMode = false
    },
    // getAccountBanks () {
    //   this.$http({
    //     url: this.$config.api.host,
    //     data: {
    //       method: 'getAccountBanks',
    //       companyNum: this.userInfo.companyNum,
    //       payModeNumber: this.bizAccountBill.paymentType
    //     }
    //   }).then(res => {
    //     if (res.code === 200) {
    //     }
    //   })
    // },
    selectCompany () {
      if (this.readonly) return
      this.$router.push('/selectCompany')
    },
    handleSubmit (isSubmit) {
      if (+this.bizAccountBill.state === 25) {
        this.initK2()
        return
      }
      let { cause, dailyLoanNum, repaymentBillNum, amount, repayDate, paymentType, expenseNum } = this.bizAccountBill
      let repaymentBills = {
        biller: this.userNum,
        cause, // 说明
        dailyLoanNum, // 借款单编码
        repaymentBillNum, // 还款单编码
        companyNum: this.userInfo.companyNum,
        isSubmit,
        amount,
        repayDate,
        paymentType,
        expenseNum
      }

      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'saveRepaymentBills',
          repaymentBills: JSON.stringify(repaymentBills)
        }
      }).then(res => {
        if (res.code === 200) {
          this.$store.commit('bizAccountBill', {
            repaymentBillNum: res.number
          })
          if (isSubmit === 0) {
            this.$store.commit('bizAccountBill', {
              state: 20
            })
            this.$tools.openToast({
              msg: '暂存成功',
              duration: 2000
            })
          } else {
            this.$tools.openToast({
              msg: '提交成功',
              duration: 2000
            })
            this.$router.replace('/')
          }
        }
      })
    },
    // 废弃单据
    abandonNewBills () {
      abandonNewBills(this.bizAccountBill.billNum, () => {
        this.$store.commit('resetBizAccountBill')
        this.$router.replace('/')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.line{
  padding:.3rem;
  background-color:#FFF;
  border-bottom:1px solid #ddd;
  &:nth-of-type(1) {
    margin-top:.35rem;
  }
  .title{
    font-size:.3rem;
  }
  .value{
    margin-top:.15rem;
    color:#aaa;
    font-size:.36rem;
  }
  textarea{
    margin-top:.25rem;
    padding:.15rem;
    border:1px solid #666;
    border-radius:.15rem;
    font-size:.3rem;
    height:1.8rem;
    margin-bottom:.25rem;
  }
}
.bottom{
  width:100%;
  background-color:#FFF;
  height:1rem;
  font-size:.36rem;
  position:absolute;
  bottom:0;
  left:0;
  .btn{
    color:$themeColor;
    height:100%;
    &:nth-of-type(2){
      color:#FFF;
      background-color: $themeColor;
    }
  }
}
</style>
